<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>树下拉框</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->

		<!-- 树组件start -->
		<script type="text/javascript" src="../../libs/js/tree/ztree/ztree.js"></script>
		<link type="text/css" rel="stylesheet" href="../../libs/js/tree/ztree/ztree.css">
		<!-- 树组件end -->

		<!-- 树形下拉框start -->
		<script type="text/javascript" src="../../libs/js/form/selectTree.js"></script>
		<!-- 树形下拉框end -->

	</head>

	<body>
		<div class="page_content">

			<div class="groupTitle"><span>1、使用url赋值</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
     	 <div class="selectTree" url="../../organizationAction.do?method=getTreeSimpleData" id="selectTree1"></div>
   	   		<br/><input type="button" value="获取值" onclick="getValue()"/> 
   	   		-->

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、使用url+参数赋值</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
		<div class="selectTree"  url="../../organizationAction.do?method=getTreeSimpleData" params='{"parentid":"1"}'></div>
		-->

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、赋值给标签的data属性</span></div>


			<div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>4、动态设置data</span></div>

			使用本地数据：<br/>
			<div class="selectTree" id="selectTree4-1" keepDefaultStyle="true"></div>
			<br/>
			<br/> 使用远程数据：
			<div class="red">此示例由后台支持</div>
			<div class="selectTree" id="selectTree4-2" keepDefaultStyle="true"></div>

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、使用隐藏域</span></div>

			<p>如果为组件添加name属性，那么会自动生成一个隐藏域input，用来存储组件当前的value，该input的name与组件name一致。<br/>在提交表单时会用到。</p>
			<div class="selectTree" name="selectTree5" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="获取隐藏域选中值" onclick="getHiddenValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、change事件</span></div>

			使用bind方法绑定change事件<br/>
			<div class="selectTree" id="selectTree6" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>7、设置某些节点不可选择</span></div>

			<p>设置父节点不可选时，点击父节点会自动展开子节点。<br/> 除父节点外，子节点也可设置不可选。
			</p>
			<div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1","clickExpand":"true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2","clickExpand":"true"},{ "id":"21", "parentId":"2", "name":"员工4(不可选)","clickExpand":"true"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>8、禁用/启用</span></div>

			<div class="selectTree" id="selectTree8" disabled="true" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/>
			<input type="button" value="启用" onclick="enableSelectTree()" />
			<input type="button" value="禁用" onclick="disableSelectTree()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>9、自定义图标</span></div>

			<div class="selectTree" id="selectTree9" keepDefaultStyle="true"></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>10、宽度、高度与方向</span></div>

			下拉框默认为120px宽度，当有较长的选项时，下拉框宽度默认不变，而选项容器宽度自适应<br/>
			<div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "false"},{ "id":"11", "parentId":"1", "name":"很长的选项很长的选项"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/>单独设置下拉框宽度，选项容器宽度默认不会小于下拉框宽度
			<br/>
			<div class="selectTree" selWidth="250" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"很长的选项很长的选项"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/> 自定义容器高度
			<br/>
			<div class="selectTree" boxHeight="100" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"很长的选项很长的选项"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/> 强制向上展开
			<br/>
			<div class="selectTree" openDirection="top" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"很长的选项很长的选项"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>11、可编辑树形下拉框</span></div>

			<div class="selectTree" id="selectTree11" editable="true" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="获取值" onclick="getEditSelectValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>12、设置初始值</span></div>

			<div class="selectTree" id="selectTree12" selectedValue="13" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="获取值" onclick="getSelectValue()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>13、多选下拉框与多选树形下拉框</span></div>

			<p>在此框架中，多选下拉框是树形下拉框的一种使用模式，详情见“多选下拉框”。</p>

			<div class="height_15"></div>

			<div class="groupTitle"><span>14、动态生成树形下拉框</span></div>

			<div class="red">此示例由后台支持</div>
			<input type="button" value="点击生成(使用url)" style="width:120px;" id="testBtn" onclick="dynamicSelTreebox1()" /><br/><br/>
			<input type="button" value="点击生成(使用data)" style="width:120px;" id="testBtn2" onclick="dynamicSelTreebox2()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>15、动态修改树形下拉框</span></div>

			<div class="selectTree" id="selectTree15" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
			<br/><br/><input type="button" value="选中“员工1”" onclick="selectSecondItem()" />
			<input type="button" value="追加一项" onclick="appendItem()" />
			<input type="button" value="移除“员工2”" onclick="removeItem()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>16、节点集成动态操作（自定义的树形下拉框）</span></div>

			<div id="customSelectTree" keepDefaultStyle="true" selWidth="200" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>17、重置树形下拉框</span></div>

			<form id="form-17">
				<table class="tableStyle" formMode="transparent" style="width:400px;">
					<tr>
						<td>传统表单元素：</td>
						<td><input type="text" /></td>
					</tr>
					<tr>
						<td>树形下拉框1：</td>
						<td>
							<div class="selectTree" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
						</td>
					</tr>
					<tr>
						<td>树形下拉框2：</td>
						<td>
							<div class="selectTree" selectedValue="21" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]}'></div>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="button" value="提交" />
							<input type="button" value="重置" onclick="resetForm()" />
						</td>
					</tr>
				</table>
			</form>

			<div class="height_15"></div>

			<div class="groupTitle"><span>18、获得选中节点自定义属性</span></div>

			<div class="selectTree" id="selectTree18" data='{"treeNodes":[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true","myFlag":"部门1-自定义属性"},{ "id":"11", "parentId":"1", "name":"员工1","myFlag":"员工1-自定义属性"},{ "id":"12", "parentId":"1", "name":"员工2","myFlag":"员工2-自定义属性"},{ "id":"13", "parentId":"1", "name":"员工3","myFlag":"员工3-自定义属性"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true","myFlag":"部门2-自定义属性"},{ "id":"21", "parentId":"2", "name":"员工4","myFlag":"员工4-自定义属性"}]}'></div>

			<div class="height_15"></div>
<br/>
			<div class="groupTitle"><span>19、节点异步加载</span></div>

			<div class="red">此示例由后台支持</div>
			<!--
     	    <div class="selectTree" asyncMode="true" url="../../organizationAction.do?method=async"></div>
			-->

			<div class="height_15"></div>

			<div class="groupTitle"><span>20、数据无前缀</span></div>

			<div class="selectTree" data='[{ "id":"1", "parentId":"0", "name":"部门1", "open": "true"},{ "id":"11", "parentId":"1", "name":"员工1"},{ "id":"12", "parentId":"1", "name":"员工2"},{ "id":"13", "parentId":"1", "name":"员工3"},{ "id":"2", "parentId":"0", "name":"部门2", "open": "true"},{ "id":"21", "parentId":"2", "name":"员工4"}]'></div>

			<div class="height_15"></div>

		</div>

		<script type="text/javascript">
			/*构建树节点数据*/
			var defaultNodes = {
				"treeNodes": [{
					id: 1,
					parentId: 0,
					name: "部门1",
					open: true
				}, {
					id: 11,
					parentId: 1,
					name: "员工1"
				}, {
					id: 12,
					parentId: 1,
					name: "员工2"
				}, {
					id: 13,
					parentId: 1,
					name: "员工3"
				}, {
					id: 2,
					parentId: 0,
					name: "部门2",
					open: true
				}, {
					id: 21,
					parentId: 2,
					name: "员工4"
				}]
			};

			var iconNodes = {
				"treeNodes": [{
					id: 1,
					parentId: 0,
					name: "部门1",
					clickExpand: true,
					icon: "../../libs/icons/user_group.png"
				}, {
					id: 11,
					parentId: 1,
					name: "员工1",
					icon: "../../libs/icons/user.png"
				}, {
					id: 12,
					parentId: 1,
					name: "员工2",
					icon: "../../libs/icons/user_female.png"
				}, {
					id: 13,
					parentId: 1,
					name: "员工3",
					icon: "../../libs/icons/user_worker.png"
				}, {
					id: 2,
					parentId: 0,
					name: "部门2",
					clickExpand: true,
					icon: "../../libs/icons/user_group.png"
				}, {
					id: 21,
					parentId: 2,
					name: "员工4",
					icon: "../../libs/icons/user.png"
				}]
			};

			function initComplete() {
				//赋给data属性
				$("#selectTree4-1").data("data", defaultNodes);
				$("#selectTree4-1").render();

				//获取远程数据
				/*
$.post("../../organizationAction.do?method=getTreeSimpleData",{},function(result){
				//赋给data属性
				$("#selectTree4-2").data("data",result); 
				//刷新树形下拉框
				$("#selectTree4-2").render();
			},"json");
*/

				//绑定change事件
				$("#selectTree6").bind("change", function() {
					if(!$(this).attr("relValue")) {
						top.Toast("showNoticeToast", "没有选择节点");
					} else {
						top.Toast("showNoticeToast", "选中节点文本：" + $(this).attr("relText") + "；选中节点值：" + $(this).attr("relValue"));
					}
				})

				//赋给data属性
				$("#selectTree9").data("data", iconNodes);
				$("#selectTree9").render();

				//渲染自定义下拉框
				$("#customSelectTree").selectTreeRender(setting17);

				//数据自定义属性
				$("#selectTree18").bind("change", function() {
					if(!$(this).attr("relValue")) {
						top.Toast("showNoticeToast", "没有选择节点");
					} else {
						var node = $(this).data("selectedNode");
						top.Toast("showNoticeToast", node.myFlag);
					}
				})

			}
			//获取值
			function getValue() {
				top.Toast("showNoticeToast", "选中节点文本：" + $("#selectTree1").attr("relText") + "；选中节点id：" + $("#selectTree1").attr("relValue"));
			}

			//获取隐藏域值
			function getHiddenValue() {
				top.Toast("showNoticeToast", $("input:hidden[name='selectTree5']").val());
			}

			//禁用
			function disableSelectTree() {
				$("#selectTree8").attr("disabled", true);
				$("#selectTree8").render();
			}

			//启用
			function enableSelectTree() {
				$("#selectTree8").attr("disabled", false);
				$("#selectTree8").render();
			}

			//通过editValue属性获取下拉树的文本值，包括编辑的文本 及 选中的文本
			function getEditSelectValue() {
				top.Toast("showNoticeToast", $("#selectTree11").attr("editValue"));
			}

			//获取选择值
			function getSelectValue() {
				top.Toast("showNoticeToast", "选中节点文本：" + $("#selectTree12").attr("relText") + "；选中节点id：" + $("#selectTree12").attr("relValue"));
			}

			//动态生成树形下拉框（使用url）
			function dynamicSelTreebox1() {
				//获取远程数据
				/*
var $selTree = $('<div class="selectTree"></div>');
			//设置url属性
			$selTree.attr("url","../../organizationAction.do?method=getTreeSimpleData"); 
			//将下拉框加到按钮的后面
			$("#testBtn").after($selTree);   
			$("#testBtn").after("<br/>"); 
			//渲染树形下拉框 
			$selTree.render(); 
*/
			}

			//动态生成树形下拉框（使用data）
			function dynamicSelTreebox2() {
				//获取远程数据
				/*
$.post("../../organizationAction.do?method=getTreeSimpleData",{},function(result){
			var $selTree = $('<div class="selectTree"></div>');
			//赋给data属性
			$selTree.data("data",result); 
			//将下拉框加到按钮的后面
			$("#testBtn2").after($selTree);   
			$("#testBtn2").after("<br/>"); 
			//渲染树形下拉框 
			$selTree.render(); 
		},"json");
*/
			}

			//动态选中项
			function selectSecondItem() {
				$("#selectTree15").setValue("11");
			}
			//追加一项
			function appendItem() {
				$("#selectTree15").addItem({
					id: 100,
					parentId: 2,
					name: "员工5"
				});
				$("#selectTree15").setValue("100");
			}
			//移除项
			function removeItem() {
				$("#selectTree15").removeItem("12");
			}

			//表单重置
			function resetForm() {
				$("#form-17")[0].reset();
				$("#form-17 .selectTree").resetValue();
			}

			/*以下为示例16所用到*/
			//自定义树形下拉框的设置
			var setting17 = {
				view: {
					addHoverDom: addHoverDom,
					removeHoverDom: removeHoverDom,
					selectedMulti: false
				},
				edit: {
					enable: true,
					renameTitle: "修改",
					removeTitle: "删除"
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: zTreeSelectItemClick,
					//不允许拖拽
					beforeDrag: beforeDrag,
					//修改完时的处理
					beforeRename: beforeRename,
					//修改成功后处理
					onRename: onRename,
					onRemove: onRemove
				}
			};

			//不允许拖拽
			function beforeDrag(treeId, treeNodes) {
				return false;
			}
			//修改完时的处理
			function beforeRename(treeId, treeNode, newName) {
				if(newName.length == 0) {
					alert("节点名称不能为空.");
					var treeContainer = $("#customSelectTree ul[class=ztree]");
					var zTree = $.fn.zTree.getZTreeObj(treeContainer.attr("id"));
					setTimeout(function() {
						zTree.editName(treeNode)
					}, 10);
					return false;
				}
				return true;
			}

			//修改成功后处理
			function onRename(e, treeId, treeNode) {
				//此处进行ajax后台数据处理
			}

			//删除处理
			function onRemove(treeId, treeNode) {
				//ajax处理
			}

			//添加新增按钮
			var newCount = 1;

			function addHoverDom(treeId, treeNode) {
				var sObj = $("#" + treeNode.tId + "_span");
				if(treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
				var addStr = "<span class='zbutton add' id='addBtn_" + treeNode.id + "' title='添加' onfocus='this.blur();'></span>";
				sObj.append(addStr);
				var btn = $("#addBtn_" + treeNode.id);
				if(btn) {
					btn.bind("click", function() {
						var treeContainer = $("#customSelectTree ul[class=ztree]");
						var zTree = $.fn.zTree.getZTreeObj(treeContainer.attr("id"));
						var newNode = zTree.addNodes(treeNode, {
							id: 100 + newCount,
							parentId: treeNode.id,
							name: "新增" + newCount++
						});
						//ajax处理
						if(newNode) {
							zTree.editName(newNode[0]);
						}
						return false;
					});
				}
			}

			function removeHoverDom(treeId, treeNode) {
				$("#addBtn_" + treeNode.id).unbind().remove();
			};
		</script>

	</body>

</html>